<template>
  <m-modal
    v-model="visible"
    title="详情"
    okText="确定"
    :mask="true"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-textarea v-if="type === 'textarea'" v-model="text" :maxLength="1000"></a-textarea>
    <a-input v-if="type === 'input'" v-model="text" :maxLength="1000"></a-input>
  </m-modal>
</template>
<script>
import { Portal } from 'src/components/common/Portal.vue';
import Modal from 'src/components/common/CustomModal';

const comp = {
  name: 'comp-textarea-modal',
  components: {
    'm-modal': Modal
  },
  props: {
    content: String,
    type: {
      default: 'input',
      type: String
    }
  },
  mounted() {

    this.visible = true;
    this.text = this.content;
    console.log('text', this.text);

  },
  data() {
    return {
      visible: false,
      text: ""
    };
  },

  methods: {
    handleOk(){
      if (this.type === 'input') {
        if (this.text.length === 0 || this.text.length > 50) {
          const option = {
            id: 110,
            text: '超出限制，输入内容请控制在1-50个字符内'
          };
          window.app.$messageBox.error(option);
        } else {
          this.$emit('sure', this.text);

        }
      } else if (this.type === 'textarea') {
        if (this.text === undefined) {
          this.$emit('close');
        } else if (this.text.length > 1000) {
          const option = {
            id: 110,
            text: '超出限制，输入内容请控制在1000个字符内'
          };
          window.app.$messageBox.error(option);

        } else {
          this.$emit('sure', this.text);
        }

      }

    },
    handleCancel(){
      this.visible = false;
      this.$emit('close');
    },
  }
};
export default comp;
export const textareaModal = new Portal(comp);
</script>
<style lang="scss">
</style>
